<template>
  <div class="dashboard-container">
    <!-- 数据统计区域 -->
    <div class="statistics">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="6" v-for="stat in statisticsData" :key="stat.id">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <div class="stat-icon" :style="{ backgroundColor: stat.color }">
                <i :class="stat.icon"></i>
              </div>
              <div class="stat-info">
                <div class="stat-value">{{ stat.value }}</div>
                <div class="stat-title">{{ stat.title }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 功能模块区域 -->
    <div class="function-modules">
      <el-row :gutter="20">
        <el-col :xs="12" :sm="8" :md="6" v-for="module in functionModules" :key="module.id">
          <el-card class="module-card" shadow="hover">
            <div class="module-icon" :style="{ color: module.color }">
              <i :class="module.icon"></i>
            </div>
            <div class="module-title"><el-button type="text" @click="navigateTo(module.route)">{{ module.title }}</el-button></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      statisticsData: [
        { id: 1, title: "用户总数", value: "12,345", icon: "el-icon-user", color: "#409EFF" },
        { id: 2, title: "订单数量", value: "2,345", icon: "el-icon-shopping-cart-2", color: "#67C23A" },
        { id: 3, title: "销售额", value: "¥ 123,456", icon: "el-icon-money", color: "#E6A23C" },
        { id: 4, title: "访问量", value: "56,789", icon: "el-icon-data-line", color: "#F56C6C" },
      ],
      functionModules: [
      // el-icon-shopping-cart-2
        { id: 1, title: "用户管理", icon: "el-icon-user", color: "#409EFF", route: "/system/user" },
        { id: 2, title: "财务数据", icon: "el-icon-coin", color: "#F56C6C", route: "/fmssystem/main" },
        { id: 3, title: "类型配置", icon: "el-icon-setting", color: "#E6A23C", route: "/fmssystem/type" },
        { id: 4, title: "财务分析", icon: "el-icon-pie-chart", color: "#67C23A", route: "/fmssystem/echarts" },
        { id: 5, title: "消息中心", icon: "el-icon-message", color: "#909399", route: "/system/notice" },
        { id: 6, title: "个人中心", icon: "el-icon-user", color: "#909399", route: "/user/profile" },
      ],
    };
  },
  methods: {
    navigateTo(route) {
      this.$router.push(route);
    },
  },
};
</script>
```

### 样式部分
```css
<style scoped>
.dashboard-container {
  min-height: 800px;
  padding: 20px;
  background-color: #f5f7fa;
}

.statistics {
  margin-bottom: 20px;
}

.stat-card {
  border: none;
  border-radius: 8px;
  background-color: #ffffff;
}

.stat-content {
  display: flex;
  align-items: center;
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 24px;
  margin-right: 15px;
}

.stat-value {
  font-size: 20px;
  font-weight: bold;
  color: #303133;
}

.stat-title {
  font-size: 14px;
  color: #909399;
}

.function-modules {
  margin-top: 20px;
}

.module-card {
  border: none;
  border-radius: 8px;
  background-color: #ffffff;
  cursor: pointer;
  transition: transform 0.3s ease;
  margin-bottom: 25px;
}

.module-card:hover {
  transform: translateY(-5px);
}

.module-icon {
  font-size: 36px;
  text-align: center;
  margin: 20px 0;
}

.module-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  text-align: center;
  margin-bottom: 20px;
}
</style>